<template>
  <div class="life-cycle-wrapper">
    <h1 class="box-msg" ref="bosMsg">{{ msg }}</h1>
    <B></B>
    <!-- <h1 id="main">
      life-cycle
      <A :list="list"></A>

    </h1> -->
  </div>
</template>
<script>
// 生命周期都是函数
// 生命周期就是在 不同的阶段 去执行的 函数
// 生命周期可以看作一个组件从出生到消亡的过程
// 生命周期不要使用箭头函数
import A from './components/A.vue'
import B from './components/B.vue'

const createData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        list: ['item1', 'item2', 'item3'],
      })
    }, 3000)
  })
}
export default {
  components: {
    A,
    B,
  },
  data() {
    return {
      msg: 'Hello Vue!',
      list: [],
    }
  },
  beforeCreate() {
    console.log('beforeCreate:', this.$el)
  },
  // 初始化
  created() {
    console.log('create:', this.$el)

    // 请求了一个异步数据
    createData().then((res) => {
      this.list = res.list
      // console.log('this.list:', this.list)
    })
    // console.log(document.querySelector('#main'))
    // console.log('初始化：created')
    // setTimeout(() => {
    //   this.msg = '我是更新后的东西'
    // }, 3000)
  },
  beforeMount() {
    // console.log('beforeMount:', this.$el)
  },
  // mounted 可以获取dom元素，处理一些dom操作
  mounted() {
    this.msg = '我是测试¥nextTick方法的数据'
    // console.log('数据更新后，获取dom元素', this.$refs.bosMsg.innerHTML)
    this.$nextTick(() => {
      console.log('更新数据后 -> 立即获取dom元素的一个方法：', this.$refs.bosMsg.innerHTML)
    })
    // console.log('mounted:', this.$el.innerHTML)
    // console.log(document.querySelector('#main'))
  },
  beforeUpdate() {
    // console.log('beforeUpdate: %c%s', 'color:blue', 'el  :' + this.$el.innerHTML)
  },
  updated() {
    // console.log('updated: %c%s', 'color:blue', 'el  :' + this.$el.innerHTML)
    // console.log('updated:', this.$el)
  },
  destroyed() {
    // console.log('destroyed:', this.$el)
  },
}
</script>
